<template>
	<body-wrap>
		<view class="orderbox">
			<view class="integralTotal">
				<text class="val">{{userInfo.point || 0}}</text>分
			</view>
			<view class="orderItem" v-for="(dt,index) in lists || []" :key="dt.id">
				<view class="leftBox">
					<view class="title">{{dt.serviceName}}</view>
					<view class="timebox">
						完成时间：
						<text class="time">{{dt.createTime}}</text>
					</view>
				</view>
				<view class="rightbox">+{{dt.point}}</view>
			</view>
			<uni-load-more :status="status" />
		</view>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import {getPointRecordList} from '@/api/index.js'
	export default defineComponent({
		components:{
			bodyWrap
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				userInfo:computed(()=>store.state.base.userInfo), 
				imgUrlPrefix:getApp().globalData.imgUrlPrefix,
				pageNumber:1,
				pageSize:12,
				lists:'',
				total:0,
				status:'loading',
				st:''
			})
			
			onPullDownRefresh(()=>{
				clearTimeout(state.st)
				state.pageNumber = 1
				state.status = 'loading'
				state.total = 0
				state.lists = ''
				getList()
				state.st = setTimeout(()=>{
					uni.stopPullDownRefresh();
				},1000)
			})
			onReachBottom(()=>{
				clearTimeout(state.st)
				if(state.status == 'loading'){
					state.pageNumber++
					state.st = setTimeout(()=>{
						getList()
					},1000)
				}
			})
			
			onMounted(()=>{
				getList()
			})
			
			const getList = ()=>{
				getPointRecordList({
					pageNumber:state.pageNumber,
					pageSize:state.pageSize,
					//orderState:0
				}).then(res =>{
					if(res.code !=0) return
					if(state.lists){
						state.lists = [...state.lists,...res.data.list]
					}else{
						state.lists = res.data.list || []
					}
					state.total = res.data.total
					if(state.lists.length>=state.total){
						state.status = 'noMore' // 加载完
					}
				})
			}
			
			return {
				...toRefs(state),
				getList
			}
		}
	})
</script>

<style lang="scss" scoped>
	.orderbox{
		box-sizing: border-box;
		width: 100%;
		padding: 30rpx;
		.integralTotal{
			font-size: 28rpx;
			text-align: center;
			margin: 0 0 30rpx 0;
			.val{
				font-size: 62rpx;
				font-weight: bold;
			}
		}
		.orderItem{
			display: flex;
			box-sizing: border-box;
			width: 100%;
			border-radius: 20rpx;
			overflow: hidden;
			background: #fff;
			padding:30rpx;
			&+.orderItem{
				margin-top: 30rpx;
			}
			.leftBox{
				flex: 1;
				.title{
					font-size: 34rpx;
					font-weight: bold;
				}
				.timebox{
					font-size: 28rpx;
					color: #6a6a6a;
					padding: 15rpx 0 0 0;
					.time{
						color: #000000;
					}
				}
			}
			.rightbox{
				font-size: 50rpx;
				font-weight: bold;
				color: #eb8f0e;
				padding: 30rpx 0 0 0;
			}
		}
	}
</style>
